import React from "react";
import './TodoMain.css';

export default function TodoMain(props) {
  //获取 todos 数据
  let {todos, checkTodo, removeTodo} = props;
  //声明函数
  let remove = (id) => {
    return () => {
      if(!window.confirm('您确定要删除该任务么?')) return;
      //删除任务
      removeTodo(id);
    }
  }
  return (
    <ul className="todo-main">
      {
        todos.map(item => {
          return <li key={item.id}>
                    <label>
                      <input type="checkbox" checked={item.done} onChange={(e) => {
                        // checkTodo(item.id, !item.done)
                        checkTodo(item.id, e.target.checked)
                      }} />
                      <span className={item.done ? "done" : ''}>{item.title}</span>
                    </label>
                    <button className="btn btn-danger" onClick={remove(item.id)}>删除</button>
                  </li>
        })
      }
      {todos.length === 0 && <li className='empty'>暂无数据</li>}
    </ul>
  );
}
